function css (node, type, val) {
  if (typeof node === 'object' && typeof node['transform'] === 'undefined') {
    node['transform'] = {}
  }

  if (arguments.length >= 3) {
    // 设置
    let text = ''
    node['transform'][type] = val // 将值赋给对应的属性

    for (let item in node['transform']) {
      if (node['transform'].hasOwnProperty(item)) { // 属性不能为原型链上的属性，必须为元素自身的属性
        switch (item) {
          case 'translateX':
          case 'translateY':
          case 'translateZ':
            text += item + '(' + node['transform'][item] + 'px)'
            break
          case 'scale':
            text += item + '(' + node['transform'][item] + ')'
            break
          case 'rotate':
            text += item + '(' + node['transform'][item] + 'deg)'
            break
        }
      }
    }

    node.style.transform = node.style.webkitTransform = text // 兼容处理node.style.webkitTransform
  } else if (arguments.length === 2) {
    // 读取
    val = node['transform'][type]// 使用val可以省定义一个变量，避免浪费
    if (typeof val === 'undefined') {
      switch (type) { // 获得属性值，没有值则为它初始化
        case 'translateX':
        case 'translateY':
        case 'rotate':
          val = 0
          break
        case 'scale':
          val = 1
          break
      }
    }
    return val
  }
}

// 竖向滑屏
function vMove (wrap, callBack) {
  // 滑屏区域
  // 滑屏元素
  let item = wrap.children[0]
  css(item, 'translateZ', 0.1)// 3d硬件加速
  // 元素一开始的位置
  let start = {}
  // 手指一开始的位置
  let element = {}
  // 滑屏最小Y值
  let minY = wrap.clientHeight - item.offsetHeight
  // 快速滑屏的必要参数
  let lastTime = 0
  let lastPoint = 0
  // 时间差
  let timeDis = 1
  // 距离差
  let pointDis = 0
  // 防抖动
  let isY = true
  let isFirst = true

  // 即点即停
  let cleartime = 0
  let Tween = {
    Linear: function (t, b, c, d) { return c * t / d + b },
    back: function (t, b, c, d, s) {
      if (s === undefined) s = 1.70158
      return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b
    }
  }
  wrap.addEventListener('touchstart', function (ev) {
    ev = ev || event
    let touchC = ev.changedTouches[0]

    start = { clientX: touchC.clientX, clientY: touchC.clientY }
    element.x = css(item, 'translateX')
    element.y = css(item, 'translateY')

    item.style.transition = 'none'

    lastTime = new Date().getTime()
    lastPoint = touchC.clientY

    // 清除速度的残留
    pointDis = 0
    item.handMove = false// 是否手动滑屏

    // 防抖动
    isY = true
    isFirst = true

    // 即点即停
    clearInterval(cleartime)

    if (callBack && typeof callBack['start'] === 'function') {
      callBack['start'].call(item)
    }
  })

  wrap.addEventListener('touchmove', function (ev) {
    // 防抖动
    if (!isY) {
      return
    }

    ev = ev || event
    let touchC = ev.changedTouches[0]

    let now = touchC
    let dis = {}
    dis.y = now.clientY - start.clientY
    dis.x = now.clientX - start.clientX
    let translateY = element.y + dis.y

    // 防抖动
    if (isFirst) {
      isFirst = false
      if (Math.abs(dis.x) > Math.abs(dis.y)) {
        isY = false
        return
      }
    }

    let nowTime = new Date().getTime()
    let nowPoint = touchC.clientY
    timeDis = nowTime - lastTime
    pointDis = nowPoint - lastPoint

    lastTime = nowTime
    lastPoint = nowPoint

    // 手动橡皮筋效果
    if (translateY > 0) {
      item.handMove = true// 是否手动滑屏
      // (0,2/3)
      let scale = document.documentElement.clientHeight / ((document.documentElement.clientHeight + translateY) * 1.5)
      translateY = css(item, 'translateY') + pointDis * scale
    } else if (translateY < minY) {
      item.handMove = true// 是否手动滑屏
      let over = minY - translateY
      let scale = document.documentElement.clientHeight / ((document.documentElement.clientHeight + over) * 1.5)
      translateY = css(item, 'translateY') + pointDis * scale
    }
    css(item, 'translateY', translateY)

    if (callBack && typeof callBack['move'] === 'function') {
      callBack['move'].call(item)
    }
  })
  /* 橡皮筋end效果 */
  wrap.addEventListener('touchend', function (ev) {
    let translateY = css(item, 'translateY')
    if (!item.handMove) {
      // 速度越大 位移越远
      let speed = pointDis / timeDis
      // 轻滑去快速滑屏效果
      speed = Math.abs(speed) < 0.5 ? 0 : speed
      let targetY = translateY + speed * 200
      // 过渡效果时间设置
      let time = Math.abs(speed) * 0.2
      time = time < 0.8 ? 0.8 : time
      time = time > 2 ? 2 : time
      // 快速滑屏的橡皮筋效果
      let type = 'Linear'
      if (targetY > 0) {
        targetY = 0
        type = 'back'
      } else if (targetY < minY) {
        targetY = minY
        type = 'back'
      }
      bsr(type, targetY, time)
    } else {
      // 手动橡皮筋效果
      item.style.transition = '1s transform'
      if (translateY > 0) {
        translateY = 0
        css(item, 'translateY', translateY)
      } else if (translateY < minY) {
        translateY = minY
        css(item, 'translateY', translateY)
      }

      if (callBack && typeof callBack['end'] === 'function') {
        callBack['end'].call(item)
      }
    }
  })

  // 即点即停函数
  function bsr (type, targetY, time) {
    clearInterval(cleartime)
    // 当前次数
    let t = 0
    // 初始位置
    let b = css(item, 'translateY')
    // 最终位置 - 初始位置
    let c = targetY - b
    // 总次数
    let d = time * 1000 / (1000 / 60)
    cleartime = setInterval(function () {
      t++

      if (callBack && typeof callBack['move'] === 'function') {
        callBack['move'].call(item)
      }

      if (t > d) {
        clearInterval(cleartime)
        if (callBack && typeof callBack['end'] === 'function') {
          callBack['end'].call(item)
        }
      }
      let point = Tween[type](t, b, c, d)
      css(item, 'translateY', point)
    }, 1000 / 60)
  }
}

// 横向滑屏
function dragNav (wrap, item) {
  // 元素一开始的位置
  let startX = 0
  // 手指一开始的位置
  let elementX = 0
  // 滑屏最小X值
  let minX = wrap.clientWidth - item.offsetWidth
  // 快速滑屏的必要参数
  let lastTime = 0
  let lastPoint = 0
  // 时间差
  let timeDis = 1
  // 距离差
  let pointDis = 0
  wrap.addEventListener('touchstart', function (ev) {
    ev = ev || event
    let touchC = ev.changedTouches[0]

    startX = touchC.clientX
    elementX = css(item, 'translateX')

    item.style.transition = 'none'

    lastTime = new Date().getTime()
    lastPoint = touchC.clientX

    // 清除速度的残留
    pointDis = 0
    item.handMove = false// 是否手动滑屏
  })

  wrap.addEventListener('touchmove', function (ev) {
    ev = ev || event
    let touchC = ev.changedTouches[0]
    let nowX = touchC.clientX
    let disX = nowX - startX
    let translateX = elementX + disX

    let nowTime = new Date().getTime()
    let nowPoint = touchC.clientX
    // var nowPoint = damu.css(item,"translateX");
    timeDis = nowTime - lastTime
    pointDis = nowPoint - lastPoint

    lastTime = nowTime
    lastPoint = nowPoint

    // 手动橡皮筋效果
    if (translateX > 0) {
      item.handMove = true// 是否手动滑屏
      // (0,2/3)
      let scale = document.documentElement.clientWidth / ((document.documentElement.clientWidth + translateX) * 1.5)
      translateX = css(item, 'translateX') + pointDis * scale
    } else if (translateX < minX) {
      item.handMove = true// 是否手动滑屏
      let over = minX - translateX
      let scale = document.documentElement.clientWidth / ((document.documentElement.clientWidth + over) * 1.5)
      translateX = css(item, 'translateX') + pointDis * scale
    }
    css(item, 'translateX', translateX)
  })
  /* 橡皮筋end效果 */
  wrap.addEventListener('touchend', function (ev) {
    let translateX = css(item, 'translateX')
    if (!item.handMove) {
      // 速度越大 位移越远
      let speed = pointDis / timeDis
      // 轻滑去快速滑屏效果
      speed = Math.abs(speed) < 0.5 ? 0 : speed
      let targetX = translateX + speed * 200
      // 过渡效果时间设置
      let time = Math.abs(speed) * 0.2
      time = time < 0.8 ? 0.8 : time
      time = time > 2 ? 2 : time
      // 快速滑屏的橡皮筋效果
      let bsr = ''

      if (targetX > 0) {
        targetX = 0
        bsr = 'cubic-bezier(.26,1.51,.68,1.54)'
      } else if (targetX < minX) {
        targetX = minX
        bsr = 'cubic-bezier(.26,1.51,.68,1.54)'
      }
      item.style.transition = time + 's ' + bsr + 'transform'
      css(item, 'translateX', targetX)
    } else {
      // 手动橡皮筋效果
      item.style.transition = '1s transform'
      if (translateX > 0) {
        translateX = 0
        css(item, 'translateX', translateX)
      } else if (translateX < minX) {
        translateX = minX
        css(item, 'translateX', translateX)
      }
    }
  })
}

function tab (wrap, tapContent, smallG) {
  let w = wrap.offsetWidth
  move(tapContent, w, smallG)
}

// 抽象小绿的下标
let now = 0
// 在1/2跳转时 让整个jump逻辑干干净净的只触发一次
let isOver = false
function move (content, w, smallG) {
  let aNodes = content.parentNode.querySelectorAll('.tap-nav a')
  let loadings = content.querySelectorAll('.tap-loading')
  css(content, 'translateX', -w)
  smallG.style.width = aNodes[0].offsetWidth + 'px'
  // 滑屏逻辑 content既是滑屏区域也是滑屏元素

  let startPoint = {}
  let elementPoint = {
    x: 0,
    y: 0
  }
  let isX = true
  let isFirst = true

  content.addEventListener('touchstart', function (ev) {
    if (isOver) {
      return
    }
    ev = ev || event
    let touchC = ev.changedTouches[0]
    startPoint = touchC
    elementPoint.x = css(content, 'translateX')
    elementPoint.y = css(content, 'translateY')

    isX = true
    isFirst = true

    content.style.transition = 'none'
  })
  content.addEventListener('touchmove', function (ev) {
    if (isOver) {
      return
    }
    if (!isX) {
      return
    }

    ev = ev || event
    let touchC = ev.changedTouches[0]

    let nowPoint = {}
    let dis = {
      x: 0,
      y: 0
    }
    nowPoint = touchC
    dis.x = nowPoint.clientX - startPoint.clientX
    dis.y = nowPoint.clientY - startPoint.clientY

    if (isFirst) {
      isFirst = false
      if (Math.abs(dis.y) > Math.abs(dis.x)) {
        isX = false
        return
      }
    }

    let translateX = elementPoint.x + dis.x
    css(content, 'translateX', translateX)

    // 1/2跳转
    jump(dis.x, w, content, loadings, aNodes, smallG)
  })
  content.addEventListener('touchend', function (ev) {
    if (isOver) {
      return
    }
    ev = ev || event
    let touchC = ev.changedTouches[0]
    let nowPoint = {}
    let dis = {
      x: 0,
      y: 0
    }
    nowPoint = touchC
    dis.x = nowPoint.clientX - startPoint.clientX

    if (Math.abs(dis.x) <= w / 2) {
      content.style.transition = '1s transform'
      css(content, 'translateX', -w)
    }
  })
}

// 1/2跳转 ---> 请求
function jump (disX, w, content, loadings, aNodes, smallG) {
  if (isOver) {
    return
  }
  if (Math.abs(disX) > w / 2) {
    isOver = true
    content.style.transition = '1s transform'
    var targetX = disX > 0 ? 0 : -2 * w
    css(content, 'translateX', targetX)

    // 请求一定要在动画执行完毕之后再发
    content.addEventListener('transitionend', endFn(content, disX, loadings, aNodes, smallG, w))
    // content.addEventListener('webkitTransitionEnd', endFn(content, disX, loadings, aNodes, smallG, w))
  }
}

function endFn (content, disX, loadings, aNodes, smallG, w) {
  content.removeEventListener('transitionend', endFn)
  // content.removeEventListener('webkitTransitionEnd', endFn)
  content.style.transition = 'none'

  for (let i = 0; i < loadings.length; i++) {
    loadings[i].style.opacity = 1
  }

  // 对now进行控制
  // 往右滑-- 往左滑++
  disX > 0 ? now-- : now++
  if (now < 0) {
    now = aNodes.length - 1
  } else if (now > aNodes.length - 1) {
    now = 0
  }
  css(smallG, 'translateX', aNodes[now].offsetLeft)
  if (aNodes[now].offsetWidth !== smallG.offsetWidth) {
    smallG.style.width = aNodes[now].offsetWidth + 'px'
  }
  // 发ajax请求 去服务器端拿数据
  // 模拟拿数据过程
  setTimeout(function () {
    // 成功 content要回到-w的位置 loading图隐藏
    for (var i = 0; i < loadings.length; i++) {
      loadings[i].style.opacity = 0
    }
    css(content, 'translateX', -w)
    isOver = false
  }, 2000)
}
export default { css, vMove, dragNav, tab }
